<template>
  <div id="login">
    <!-- 登录 -->
    <div class="btn" v-if="!userInfo.name" @click.stop="showMark">
      <el-button type="primary" size='small'>登录/注册</el-button>
    </div>
    <userVue v-else></userVue>
  </div>
  <!-- 登录注册 -->
  <div class="mark" v-if="isShowLogin">
    <div class="show" @click.stop>
      <el-tabs v-model="activeName">
        <el-tab-pane label="立即登录" name="first">
          <el-form 
          ref="loginForm" 
          :model="loginForm" 
          label-width="80px"
          :rules="rules"
          >
            <el-form-item label="用户名" prop="name">
              <el-input v-model="loginForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass" @keydown.enter="loginInfo">
              <el-input v-model="loginForm.pass" type="password"></el-input>
            </el-form-item>
            <div class="dl">
              <el-button type="primary" @click="loginInfo">登录</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册账号" name="second">
          <el-form
            ref="regForm" 
            :model="regForm" 
            label-width="80px"
            :rules="rules"
          >
            <el-form-item label="用户名" prop="name">
              <el-input v-model="regForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input v-model="regForm.pass"  type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="pass2">
              <el-input v-model="regForm.pass2" type="password"></el-input>
            </el-form-item>
            <el-button type="primary" @click="regUserInfo">立即注册</el-button>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
 
<script>
import userVue from "@/components/user/user"
import {mapState,mapMutations} from "vuex"
export default {
  name: 'Login',
  data(){
    return{
      activeName: 'first',
      loginForm:{
        name:"",
        pass:""
      },
      regForm:{
        name:"",
        pass:"",
        pass2:""
      },
      rules:{
        name:[  
          { required: true, trigger: 'blur' },
          { min: 3, max: 6, message: '名字长度在 3 到 6 个字符', trigger: 'blur' }
        ],
        pass:[
          { required: true, trigger: 'blur' },
          { min: 6, max: 10, message: '密码长度在 6 到 10 个字符', trigger: 'change' }
        ],
        pass2:[
          { required: true, trigger: 'change' },
          {
            validator:(rule,value,cb)=>{
              // 检验两次密码是否相同
              if(this.regForm.pass !== value){
                // 打印出错误
                cb(new Error("两次输入的密码不一致"))
              }
              cb()
            }
  			  }
        ]
      },
      // 显示登录
      isShowLogin:false,

    }
  },
  components:{
    userVue
  },
  computed:{
    // 用户登录信息
    ...mapState(["userInfo"])
  },
  methods:{
    ...mapMutations(['altUserInfo']),
    // 注册用户
    regUserInfo(){
      this.$refs.regForm.validate(async v=>{
        if(!v) return false
        let {data} = await this.$axios.post("/client/user/reg",{
          name:this.regForm.name,
          pass:this.regForm.pass
        })
        if(data.code) return this.$message.warning(data.mes)
        this.$message.success(data.mes)
        this.activeName = "first"
      })
    },
    // 登录用户
    loginInfo(){
      this.$refs.loginForm.validate(async v=>{
        if(!v) return false
        let {data} = await this.$axios.post("/client/user/login",{
          name:this.loginForm.name,
          pass:this.loginForm.pass
        })
        if(data.code) return this.$message.warning(data.mes)
        this.$message.success(data.mes)
        // 存入vuex
        this.altUserInfo(data.data)
        // 关闭登录
        this.isShowLogin=false
      })
    },
    // 显示登录
    showMark(){
      this.isShowLogin=true
      this.$message("点击空白处即可关闭")
    }
  },
  mounted(){
    document.addEventListener("click",()=>{
      this.isShowLogin = false
    },false)
  }
}
</script>

<style scoped lang='less'>
#login{
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  .el-button{
    margin-right: 20px;
    margin-top:40px;
  }
}
.mark{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  z-index: 1000;
  user-select: none;
  .show{
    width: 360px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    padding: 20px;
    .dl{
      padding-left: 40px;
    }
  }
}
</style>